<template>
<div class="content">
    <div class="left-content">
      <div class="weather-info">
        <div class="weather">
          <p class="date">{{today.lunar.ncWeek}},{{today.lunar.cMonth}}月{{today.lunar.cDay}}日,农历{{today.lunar.monthCn}}{{today.lunar.dayCn}}</p>
          <div class="weather-now">
            <span>{{ weatherData.now }}</span><span>℃</span><span>{{ weatherData.text }}</span>
            <div class="weather-img" 
            :style="{backgroundImage: 'url(' +weatherData.img+')'}"></div>
          </div>
          <p class="temp-rang" >
            <span>{{ weatherData.temp }}</span>
          </p>
          <P class="temp-rang">
            <span>{{ weatherData.wind }}</span>
          </P>
        </div>
        <div class="room-info">
          <p>室内环境</p>
          <p>温度</p>
          <p class="room-data" v-text="roomEnvironment.temperature + '℃'"></p>
          <br>
          <p>湿度</p>
          <p class="room-data" v-text="roomEnvironment.humidity||'--' + '%'"></p>
        </div>
      </div>
      <div id="" class="left-chart">
        <p class="chart-title"><span>近7日能耗量</span></p>
        <chart :options="chart1"  :theme="chartTheme" auto-resize></chart>
      </div>
      <div id="" class="left-chart">
        <p class="chart-title"><span>近7日能耗成本</span></p>
        <chart :options="chart2"  :theme="chartTheme" auto-resize></chart>
      </div>
    </div>
    <div class="center-content">
        <div class="main-info">     
            <p>昨日能源消耗</p>
            <span v-text="today.text"></span>
          <div class="main-info-box">
            <div class="little-angel">
              <span></span>
            </div>
            <div class="little-angel little-angel2">
                <span></span>
              </div> 
            <div class="main-info-box-half">
              <div class="main-info-data">
                <span class="top-num" :class="{'point-style':item==='.'}" v-for="item in energyInfo.perCapita+''" :key="item.index">
                  <span v-text="item"></span>
                </span>
                <span class="top-unit">
                  <span>人均能耗</span>
                  <span>kgce/人</span>
                </span>
              </div>
              <div class="main-info-data">
                <span class="top-num" :class="{'point-style':item==='.'}" v-for="item in preArea[0]" :key="item.index">
                  <span v-text="item"></span>
                </span>
                <span class="top-unit">
                  <span>单位面积能耗</span>
                  <span>{{preArea[1]}}kgce/㎡</span>
                </span>
              </div>
            </div>
            <div class="main-info-box-half">
              <div class="main-info-sub-box" :style="{width: '45%'}">
                <p>全年能耗</p>
                <div class="buttom-num" v-for="item in energyInfo.yearEnergy+''" :key="item.index">
                  <span v-text="item"></span>
                </div>
                <div class="buttom-unit">
                  <p>kgce</p>
                </div>
              </div>
              <div class="main-info-sub-box" :style="{width: '45%'}">
                <p>全年电耗</p>
                <div class="buttom-num" v-for="item in energyInfo.yearElect+''" :key="item.index">
                  <span v-text="item"></span>
                </div>
                <div class="buttom-unit">
                  <p>kWh</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      <div class="center-img">
        <div class="center-pop">
          <p v-text="companyInfo.name"></p>
          <ul>
            <li><span>占地面积:</span> <span v-text="87 + ' 亩'">23.1 </span></li>
            <li><span>建筑面积:</span> <span v-text="Math.round(companyInfo.buildarea) + ' ㎡'">23.1 </span></li>
            <li><span>空调面积:</span> <span v-text="companyInfo.energyarea + ' ㎡'">231 ㎡</span></li>
            <li><span>建筑数量:</span> <span v-text="companyInfo.buildnum + ' 栋'">4 栋</span></li>
            <li><span>编制人数:</span> <span v-text="companyInfo.energypeople + ' 人'">231 人</span></li>
            <li><span>病床数量:</span> <span v-text="companyInfo.bed + ' 床'"></span></li>
          </ul>
        </div>
        <div class="buling-pop" :class="'buling-pop'+(item.flag)" v-for="item in buildLoad" :key="item.flag">
          <div class="buliding-info">
            <p>实时负荷</p>
            <p><span v-text="item.load"></span>kW</p>
          </div>
          <div class="buliding-name" v-text="item.name.substring(0,3)"></div>
        </div>
      </div>
    </div>
    <div class="right-content">
      <div class="right-table">
        <h4><span>上月能耗一览</span></h4>
        <table class="desk-table">
          <thead>
            <tr>
              <th>能耗种类</th>
              <th>消耗量</th>
              <th>费用</th>
            </tr>
          </thead>
        </table>
        <div class="desk-table2">
          <table class="desk-table">
            <tbody>
              <tr>
                <td>电</td>
                <td>{{accountData.ELECTRICITY_CONSUMPTION || '-'}} kWh</td>
                <td>{{accountData.ELECTRICITY_FEES||'-'}}元</td>
              </tr>
              <tr>
                <td>水</td>
                <td>{{accountData.WATER_CONSUMPTION || '-'}} 吨</td>
                <td>{{accountData.WATER_FEES || '-'}} 元</td>
              </tr>
              <tr>
                <td>天然气</td>
                <td>{{accountData.NATURALGAS_CONSUMPTION || '-'}} m³</td>
                <td>{{accountData.NATURALGAS_FEES || '-'}} 元</td>
              </tr>
              <tr>
                <td>汽油</td>
                <td>{{accountData.GASOLINE_CONSUMPTION || '-'}} 升</td>
                <td>{{accountData.GASOLINE_FEES || '-'}} 元</td>
              </tr>
              <tr>
                <td>柴油</td>
                <td>{{accountData.DIESEL_CONSUMPTION || '-'}} 升</td>
                <td>{{accountData.DIESEL_FEES || '-'}} 元</td>
              </tr>
              <tr>
                <td>液化石油气</td>
                <td>{{accountData.PETROLEUMGAS_CONSUMPTION || '-'}} m³</td>
                <td>{{accountData.PETROLEUMGAS_FEES || '-'}} 元</td>
              </tr>
              <tr>
                <td>人工煤气</td>
                <td>- m³</td>
                <td>- 元</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="right-table">
        <h4><span>昨日部门电耗</span></h4>
        <table class="desk-table">
          <thead>
            <tr>
              <th>部门名称</th>
              <th>建筑面积</th>
              <th>耗电量</th>
            </tr>
          </thead>
        </table>
        <div class="desk-table2">
          <table class="desk-table ">
            <tbody>
              <tr v-for="item in officeRank" :key="item.index">
                <td>{{ item.name }}</td>
                <td>{{ item.area }}㎡</td>
                <td>{{ item.data }}kWh</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import solarlunar from 'solarlunar'
export default {
  data () {
    return {
      chartTheme: {},
      chart1: {
        color:['#23f0ff','#903bff','#3630ff'],
        tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: [ '水','电'],
          top: 20,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis:  {
          type: 'value',
        },
        yAxis: {
          type: 'category',
          data: ['12月1日','12月2日','12月3日','12月4日','12月5日','12月6日','12月7日'],
        },
        series: [
          {
            name: '水',
            type: 'bar',
            stack: '总量',
            barWidth: 16,
            label: {
              normal: {
                show: true,
                position: 'insideRight',
                color: '#626cf2'
              }
            },
            // data: [320, 302, 301, 334, 390, 330, 320],
          },
          {
            name: '电',
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'insideRight'
              }
            },
            // data: [120, 132, 101, 134, 90, 230, 210],
            itemStyle: {
              normal: {
                barBorderRadius: [0,8,8,0]
              }
            }
          }
        ]
      },
      chart2: {
        color:['#23f0ff','#edafda'],
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data:['能耗成本','增长率'],
          top: 20,
        },
        dataZoom: {
          show: false,
        },
        xAxis: [
          {
            type: 'category',
            data: ['12月1日','12月2日','12月3日','12月4日','12月5日','12月6日','12月7日'],
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '成本',
            offset: -10,
            // min: function(value) {
            //   return value.min - 50;
            // }
            // min: 0  
          },
          {
            type: 'value',
            name: '百分比',
            "splitLine": {
              show: false
            },
          
          }
        ],
        series: [
          {
            name:'能耗成本',
            barWidth: 20,
            type:'bar',
            data: [20,60,70,140,250,500,1400],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[
                  {offset: 0, color: '#34ffb0'},
                  {offset: 0.5, color: '#34ffb0'},
                  {offset: 1, color: 'rgba(0, 232, 207, .1)'}
                ]),
                barBorderRadius: [20,20,0,0],
              }
            }
          },
          {
            name:'增长率',
            type:'line',
            symbol: 'circle',
            yAxisIndex: 1,
            smooth: false,
            data: [14,40,60,70,100,120,180]
          }
        ],
        animationDuration: 750
      },

      cityKey: 101210303,
      weatherData: {now:'', text:'', temp:'', wind: '',img: ''},
      roomEnvironment: {},

      energyInfo: {elec_thisyear:'',elec_yestday:'',energy_thisyear:'',eneyry_yestday:''},
      buildLoad: [],
      companyInfo: {},
      officeRank: {},
      accountData : {},
      preArea: ['0','']
    }
  },
  computed: {
    today: function () {
      let _today = {}
      let _date = new Date()
      let year = _date.getFullYear()
      let month = _date.getMonth()+1
      let date = _date.getDate()
      let lunar = solarlunar.solar2lunar(year,month,date)
      let day1 = new Date();
      day1.setTime(day1.getTime()-24*60*60*1000);
      _today.lunar = lunar
      _today.text = day1.getFullYear()+"-" + (day1.getMonth()+1) + "-" + day1.getDate()
      return _today
    }
  },
  mounted: function () {
    var _this = this;
    this.$http('/vqdisplay/static/HospitalChartTheme.json')
    .then( function (response) {
      _this.chartTheme = response.data
      
    })
    this.getWeather(this.cityKey)
    this.getData();
  },
  methods: {
    getWeather: function (citykey) {
      this.$http('http://wthrcdn.etouch.cn/weather_mini?citykey=' + citykey)
      .then( (response)=>{
        var _d = response.data.data
        this.weatherData.now = _d.wendu
        this.weatherData.text = _d.forecast[0].type
        this.weatherData.temp = _d.forecast[0].low.substring(2,_d.forecast[0].low.length-1) + '~' + _d.forecast[0].high.substring(2)
        this.weatherData.wind = _d.forecast[0].fengxiang + _d.forecast[0].fengli.substring(9,_d.forecast[0].fengli.length-3)
        this.weatherData.img = this.getWeatherImage(_d.forecast[0].type)
      })
    },
    getWeatherImage: function (id) {
      return require('../../../assets/weather/' + id + '.svg')
    },
    num2e: function (num) {
      var p = Math.floor(Math.log(num)/Math.LN10);
      var n = num * Math.pow(10, -p);
      return [n.toFixed(2),'e' + p];
    },
    getData: function () {
      this.$http('/vqdisplay/index/data')
      .then( (response) => {
        if (response.status===200) {
          let _data = response.data.body
          this.energyInfo = _data.energy_info
          if (_data.energy_info.preArea.toString().length>6) {
            this.preArea = this.num2e(_data.energy_info.preArea)
          } else {
            this.preArea = [_data.energy_info.preArea.toString(),'']
          }
          this.accountData = _data.account_yesterday

          this.buildLoad = _data.build_load
          this.companyInfo = _data.company_info
          this.roomEnvironment = _data.room_environment
          this.officeRank = _data.office_rank

          this.chart1.yAxis.data = _data.energy_trend.xAxis
          for (var i=0; i<_data.energy_trend.series.length; i++) {
            if (Object.keys(_data.energy_trend.series[i])[0] === '电') {
              this.chart1.series[1].data = _data.energy_trend.series[i]['电']
            } else {
              this.chart1.series[0].data = _data.energy_trend.series[i]['水']
            }
          }
          
          this.chart2.xAxis[0].data = _data.price_trend.xAxis
          this.chart2.series[0].data = _data.price_trend.series[0]['能耗成本']
          this.chart2.series[1].data = _data.price_trend.series[1]['增长率']
        }
      })
    }
     
  }
  
}
</script>

<style scoped>
  @import '../../../style/hospital.css';

  .echarts {
    height: 270px;
    width: 100%;
  }
  .top-num {
    margin-left: 4px;
  }
  .buttom-num {
    margin-left: 2px;
  }
</style>